<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		<template v-if="token&&isLogin">
			<view class="body" :style="'background: url('+static_img+'s1.png) no-repeat;background-size: cover;'"> 
				<view class="data-area">
					<template v-if="loadingState.loading">
						<view class="loading-box center">
							<loading :loadingState="loadingState" icon="white"></loading>
						</view>
					</template>
					<template v-else>
						<template v-if="detail">
							<view class="title">{{select_dev.name}}</view>
							<view class="data-swiper">
								<swiper class="swiper" :indicator-dots="swiper_option.indicatorDots" :autoplay="swiper_option.autoplay" :interval="swiper_option.interval" :duration="swiper_option.duration" circular='true' :vertical="swiper_option.vertical">
									<swiper-item>
										<view class="item">
											<view class="label">空气温度：</view>
											<view>{{detail.air_temperature?detail.air_temperature+'℃':'-'}}</view>
										</view>
										<view class="item">
											<view class="label">空气湿度：</view>
											<view>{{detail.air_humidity?detail.air_humidity+'%':'-'}}</view>
										</view>
										<view class="item">
											<view class="label">降 雨 量：</view>
											<view>{{detail.rainfall?detail.rainfall+'mm':'-'}}</view>
										</view>
									</swiper-item> 
									<swiper-item>
										<view class="item">
											<view class="label">土壤温度：</view>
											<view>{{detail.soil_temperature?detail.soil_temperature+'℃':'-'}}</view>
										</view>
										<view class="item">
											<view class="label">土壤湿度：</view>
											<view>{{detail.soil_humidity?detail.soil_humidity+'℃':'-'}}</view>
										</view>
										<view class="item">
											<view class="label">光 照 度：</view>
											<view>{{detail.illuminance?detail.illuminance+'Lus':'-'}}</view>
										</view>
									</swiper-item>
									<swiper-item>
										<view class="item">
											<view class="label">风 速：</view>
											<view>{{detail.wind_speed?detail.wind_speed+'m/s':'-'}}</view>
										</view>
										<view class="item">
											<view class="label">风 向：</view>
											<view>{{detail.wind_direction?detail.wind_direction+'°':'-'}}</view>
										</view>
									</swiper-item>
									<template v-if="pest.list.length>0">
										<swiper-item v-for="(item,index) in pest.page" :key="index">
											<view class="item" v-for="(subitem,subindex) in pest.list[index]" :key="subindex">
												<view class="label">{{subitem.pest_name}}：</view>
												<view>{{subitem.pest_count==null?'0':subitem.pest_count}}头</view>
											</view>										 
										</swiper-item>
									</template>									
								</swiper>
							</view>
						</template>
						<template v-else>
							<view class="empty-box center">
								<view class="text">暂无数据</view>
							</view>
						</template>
					</template>					
				</view> 
				
			</view>
		</template>
	</view>
</template>

<script>
	import {HTTP_STATIC_IMG} from '@/config.js'
	import loading from '@/components/loading-more.vue' 
	import empty from '@/components/empty.vue'
	export default{
		name:'',
		data(){
			return {
				isIphoneX: getApp().globalData.isIphoneX,
				appid:getApp().globalData.appid,
				token:uni.getStorageSync('token'),
				isLogin:false,
				userInfo:uni.getStorageSync('userInfo'),
				loginStateUpdate: false,
				detail:{}, 
				pest:{
					page:1,
					n:3,
					list:[]
				},
				select_dev:{
					id:'',
					name:'',
					update:false
				},
				loadingState:{
					loading:true
				},
				swiper_option:{
					indicatorDots: false,
					autoplay: true,
					interval: 4000,
					duration: 100,
					vertical:true
				},
				static_img:HTTP_STATIC_IMG
			}
		},
		async onLoad(params){ 
			this.select_dev.id=params.dev_number;
			this.select_dev.name=params.dev_name;
			
			if(this.token){
				this.isLogin=await this.$loginState('check');  
				if(this.isLogin){  
					this.getXianShiPingData()
				}else{
					this.isLogin=await this.$loginState('reset');
				}
			} 
		},
		async onShow() {			
			if(this.loginStateUpdate){
				this.token=uni.getStorageSync('token');
				this.userInfo=uni.getStorageSync('userInfo'); 
				this.isLogin=true;
				this.getXianShiPingData()
				this.loginStateUpdate=false;
			}	
			
			if(!this.token&&!this.isLogin){
				this.isLogin=await this.$loginState('reset'); 
			}
		},
		methods:{
			getXianShiPingData:async function(){
				let res=await this.$api.tool_api.getXianShiPingData({
					appid:this.appid,
					token:this.token,
					device_number:this.select_dev.id
				})
				if(res.data.ret==1000){
					this.loadingState.loading=false;
					if(res.data.data){ 
						if(res.data.data.pest&&res.data.data.pest.length>0){
							// 计算数组 根据总虫子数量计算 分几页 按每页3条
							this.pest.page=Math.ceil(res.data.data.pest.length/3);							
							for(let i=0;i<this.pest.page;i++){
								this.pest.list.push(res.data.data.pest.slice(this.pest.n*i,(this.pest.n*i+this.pest.n)))
							}							 
						}						
						this.detail=res.data.data;
					}else{
						this.detail=false
					} 
				}else{
					this.loadingState.loading=false;
				} 
			}
		},
		computed: { 
			
		}, 
		components: {
			loading,
			empty
		},
	}
</script>

<style lang="less">
	page,.page,.body{
		position: relative;
		height: 100%;
	} 
	.data-area{
		width:70%;
		height:280rpx;
		margin:50rpx auto;
		background: #000;
		border:20rpx solid #ccc; 
		border-radius: 10rpx;
		color:#f00;
		.loading-box{
			height: 100%;
		}
		.empty-box{
			height: 100%; 
			font-size: 34rpx;
		}
		.title{
			margin: 10rpx 20rpx 20rpx;
			text-align: center;
			font-size: 36rpx;
		}
	}
	.data-swiper{
		height:200rpx; 
		.swiper{
			height:100%; 
			.item{
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				margin-bottom: 10rpx;
				font-size: 34rpx; 
			}
		}
	}
	 
</style>
